<template>
	<view style="height: 100%;width: 100%;" class="li">
		<view style="position: fixed;top: 0;width: 750rpx;height: 126.84rpx;padding-top: 60rpx;text-align: center;line-height: 126.84rpx;font-size: 32.616rpx;color: #1C202C;background: #FFFFFF;z-index: 121212121;border-bottom: 0.5rpx solid #BEBEBE;">宝宝秀</view>
		<view style="position: fixed;top: 105rpx;left: 60rpx;z-index: 121212121;font-size: 32.616rpx;display: flex;align-items: center;"
		 @tap="fabu" v-if="user_id != ''">
			<view>发布</view>
			<view style="margin-left: 10rpx;">
				<image :src="zhaoxiang" style="width: 32rpx;height: 27rpx;"></image>
			</view>
		</view>
		<view style="position: fixed;top: 175.36rpx;" class="list">
			<view style="width: 750rpx;box-sizing: border-box;padding: 35rpx 30rpx;display: flex;justify-content: space-between;">
				<view class="list_title" style="background-color: #E3DDFF;">
					<view>
						<image class="img" :src="shuji"></image>
					</view>
					<view>
						<text>#学研社#</text>
					</view>
				</view>
				<view class="list_title" style="background-color: #FFE2CA;">
					<view>
						<image class="img" :src="jiaobu"></image>
					</view>
					<view>
						<text>#兴趣联盟#</text>
					</view>
				</view>
			</view>
		</view>
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
		 :style="{height: windowHeight}" :lower-threshold="lower_threshold" refresher-enabled="true" :refresher-triggered="triggered"
		 @refresherrefresh="onRefresh" :refresher-threshold="100" @refresherpulling="pulling" refresher-background="#FFFFFF">
			<view v-for="(itme,index) in friend_list_shuju" :key="index" class="zhu_content">
				<view @tap="xiangqing_ye(itme)">
					<view class="up_title">
						<view style="display: flex;">
							<view>
								<image :src="itme.map.userinfo.avatar" style="width: 90rpx;height: 90rpx;border-radius: 50%;"></image>
							</view>
							<view>
								<view style="font-size: 28rpx;font-weight: bold;margin-left: 20rpx;margin-top: 10rpx;">{{itme.map.userinfo.nick_name}}</view>
								<view style="font-size: 24rpx;color: #C1C1C1;margin-left: 20rpx;margin-top: 10rpx;">{{itme.new_time}}</view>
							</view>
						</view>
						<view style="height: 100rpx;width: 100rpx;text-align: center;" @tap.stop="gochanchu(itme)">
							<image :src="miaohao" style="width: 47rpx;height: 12rpx;"></image>
						</view>
					</view>
					<view class="biaoti" :style="{width: itme.leng + 'rpx'} ">{{itme.title_biao}} </view>
					<view style="font-size: 28rpx;">{{itme.content}}</view>
				</view>
				<view class="tupian_list" v-if="!itme.isvode">
					<view v-for="(itm,indexs) in itme.photo_arr" :key="indexs">
						<image :src="itm" :class="itme.photo_arr.length == 1 ? 'yige' : 'duoge'" @tap.stop="gokantupian(itme.photo_arr,indexs)"></image>
					</view>
				</view>
				<view class="tupian_list" v-if="itme.isvode">
					<keep-alive>
						<view v-for="(itm,indexs) in itme.photo_arr" :key="indexs">
							<view class="page-body">
								<view class="page-section page-section-gap" style="text-align: center;">
									<video style="text-align: left" :src="itm"></video>
								</view>
							</view>
						</view>
					</keep-alive>
				</view>
				<view class="curriculum_content" @tap="gokecheng(itme.map.masterSetPriceEntity,itme.map)">
					<view class="curriculum_content_tit">
						<view>
							<image :src="itme.map.masterSetPriceEntity.face_url" class="curriculum_content_img"></image>
						</view>
						<view>
							<view style="font-size: 28rpx;font-weight: bold;">{{itme.title_biao}}</view>
							<view style="color: #ED4949;margin-left: 10rpx;">
								<text style="font-size: 22rpx;font-weight: bold;">￥</text>
								<text style="font-size: 28rpx;font-weight: bold;">{{itme.map.masterSetPriceEntity.original_price}}</text>
								<text style="font-size: 22rpx;font-weight: bold;">/ 节</text>
							</view>
						</view>
					</view>
					<view>
						<image :src="zhishi_jiantou" style="width: 37rpx;height: 37rpx;"></image>
					</view>
				</view>
				<view v-if="itme.map.commentCount != 0" style="margin-left: 10rpx;">
					<view v-for="(itt,ind) in itme.map.noteCommentEntities" :key="ind" class="pinglun_list">
						<text>{{itt.map.userinfo.nick_name}} :</text>
						<text style="margin-left: 10rpx;">{{itt.content}}</text>
					</view>
				</view>
				<view class="xiamian_shuju">
					<view class="neibu">
						<view>
							<image :src="fenxiang" style="width: 50rpx;height: 50rpx;"></image>
						</view>
						<view>

						</view>
					</view>
					<view class="neibu" @tap="pinglun_(itme)">
						<view>
							<image :src="pinglun" style="width: 50rpx;height: 50rpx;"></image>
						</view>
						<view style="margin-left: 10rpx;">{{itme.map.commentCount}}</view>
					</view>
					<view class="neibu">
						<view>
							<image :src="dianzan" style="width: 50rpx;height: 50rpx;" v-if="!itme.zan" @tap.stop="dianzan_(itme)"></image>
							<image :src="hongxin" style="width: 50rpx;height: 50rpx;" v-if="itme.zan"></image>
						</view>
						<view style="margin-left: 10rpx;">{{itme.like_count}}</view>
					</view>

				</view>
			</view>
			<view class="xiafang" v-if="is_xiafang">
				没有更多了
			</view>
		</scroll-view>
		
		<van-popup :show="isshow" position="bottom" round>
			<view style="width: 750rpx;height: 700rpx;background-color: #FFFFFF;">
				<view style="display: flex;">
					<view>
						<input type="text" placeholder="请说出你的想法" :focus="isFocus" style="margin-left: 40rpx;width: 400rpx;height: 70rpx;background-color: #E4E4E4;border-radius: 15rpx;font-size: 27rpx;padding: 0 20rpx;margin-top: 20rpx;"
						 v-model="inp_content" />
					</view>
					<view :style=" {backgroundColor : inp_content == '' ? '#E4E4E4' : '#FF7300'}" class="anniu" @tap="tijiao_pinglun_">发表</view>
					<view style="margin: 25rpx 0 0 100rpx;" @tap="shandiao">
						<image :src="chazi" style="width: 50rpx;height: 50rpx;"></image>
					</view>
				</view>
			</view>
		</van-popup>
		
		<van-popup :show="isshow_fabu" position="bottom" round>
			<view style="width: 750rpx;height: 850rpx;background-color: #FFFFFF;box-sizing: border-box;padding: 20rpx 60rpx;">
				<view style="width: 630rpx;display: flex;justify-content: space-between;font-size: 30rpx;align-items: center;">
					<view style="color: #363636;width: 100rpx;height: 50rpx;line-height: 50rpx;" @tap="fabu_quxiao">取消</view>
					<view style="font-weight: bold;font-size: 35rpx;">发布圈子</view>
					<view style="color: #FF7300;width: 100rpx;height: 50rpx;line-height: 50rpx;" @tap="fabu_baobao">发布</view>
				</view>
				<view style="width: 630rpx;height: 1rpx;background-color: #D7D7D7;margin-top: 40rpx;"></view>
				<view style="display: flex;align-items: center;margin-top: 20rpx;" @tap="goto_xuan">
					<view>
						<image :src="weizhi_tupian" style="width: 30rpx;height: 30rpx;"></image>
					</view>
					<view style="margin-left: 10rpx;">{{chushi_content}}</view>
					<view style="margin-left: 10rpx;">
						<image :src="jiantou_tupian" style="width: 20rpx;height: 20rpx;"></image>
					</view>
				</view>
				<view style="margin-top: 10rpx;">
					<textarea placeholder-style="color:#BFBFBF" placeholder="请说出你的想法" style="background-color: #F2F2F2;width: 630rpx;padding: 30rpx;box-sizing: border-box;"
					 maxlength=num v-model="neirong" v-if="isshow_fabu" />
					</view>
				<view style="display:flex ;">
					<view v-for="(ites,ins) in img_list" :key="ins" style="margin-top: 50rpx;margin-right: 15rpx ;flex-wrap: wrap;">
						<image :src="ites" style="height: 150rpx;width: 150rpx;border-radius: 10rpx;"></image>
					</view>
					<view style="height: 150rpx;width: 150rpx;background-color: #F2F2F2;display: flex;justify-content: center;align-items: center;margin-top: 50rpx;" @tap="addl">
						<image :src="shexiang_tupian" style="width: 80rpx;height: 80rpx;"></image>
					</view>
				</view>
			</view>
		</van-popup>
	</view>
</template>
<script>
	import qiniu from "../../common/qiniuUploader.js"
	export default {
		data(){
			return {
				user_id: "",
				num: 1,
				shuju: [],
				list: 0,
				panduan: 6,
				active: 1,
				content: "",
				kong: "http://img.curiousmore.com/968125",
				zhijian: "http://img.curiousmore.com/578648",
				jiaobu: "http://img.curiousmore.com/398391021198",
				shuji: "http://img.curiousmore.com/12624267096",
				triggered: false,
				currentPage: 1,
				friend_list_shuju: [],
				fenxiang: "http://img.curiousmore.com/374433724675",
				pinglun: "http://img.curiousmore.com/559130085024",
				dianzan: "http://img.curiousmore.com/46955563369",
				list_: false,
				isshow: false,
				inp_content: "",
				chazi: "http://img.curiousmore.com/695577971410",
				isFocus: false,
				reply_id: "",
				note_id: "",
				hongxin: "http://img.curiousmore.com/166925141460",
				zhaoxiang: "http://img.curiousmore.com/838086763896",
				isshow_fabu: false,
				chushi_content: "请选择相应的课程(可选)",
				weizhi_tupian: "http://img.curiousmore.com/263302243155",
				jiantou_tupian: "http://img.curiousmore.com/40256048490",
				shexiang_tupian: "http://img.curiousmore.com/27072141655",
				neirong: "",
				key: "",
				token: "",
				img_list: [],
				id: "",
				categories: "",
				panduan_number: 1,
				friend_: [],
				zhishi_jiantou: "http://img.curiousmore.com/595929208202",
				miaohao: "http://img.curiousmore.com/255411744056",
				is_xiafang: false,
				windowHeight: "",
				dianzan_xinxin: []
			}
		},
		
		
		methods:{
			gochanchu(itme) {
				let me = this
				if(itme.user_id == this.user_id){
					uni.showModal({
					    title: '删除',
					    content: '是否删除动态',
					    success: function (res) {
					        if (res.confirm) {
					            me.shanchu_note(itme)
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
				}
			},
			
			shanchu_note(itme) {
				let me = this
				uni.request({
					url: "https://curiousmore.com/qmore/message/noteUser/delete",
					methed: "post",
					data: {
						id: itme.id
					},
					header: {
						'content-type' : 'application/json'
					},
					success: (res) => {
						if(res.data.code == 0){
							uni.showToast({
								title: "删除成功"
							})
							me.friend_ = []
							me.friend_list()
						}
					}
				})
			},
			
			gokecheng(itme,index) {
				uni.navigateTo({
					url: '/pages/World/classChannel/classChannel?curriculumId=' + itme.id
				})
			},
			
			xiangqing_ye(itme){
				uni.navigateTo({
					url: "/pages/My/appointmentClass/appointmentClass?dataBox=" + itme.id
				})
			},
			
			lower() {
				if(this.panduan_number == 1){
					this.currentPage++
					this.friend_list()
				}else {
					this.is_xiafang = true
				}
			},
			
			fabu_baobao() {
				let me = this
				uni.request({
					url: "https://curiousmore.com/qmore/message/noteUser/insert",
					method: "post",
					header: {
						'content-type' : 'application/json'
					},
					data: {
						user_id: me.user_id,
						content: me.neirong,
						is_teach_paypal: true,
						picts: me.img_list.toString(),
						status: 1,
						master_set_price_id: me.id,
						classfiy: me.categories
					},
					
					success: (res) => {
						if(res.data.code == 0){
							uni.showToast({
								title: "发表成功"
							})
							me.chushi_content = "请选择相应的课程(可选)"
							me.img_list = []
							try{
								uni.removeStorageSync('shuju_baobaoxiu')
								me.neirong = ""
								me.isshow_fabu = false
							}catch(e){}
							me.currentPage = 1
							me.friend_ = []
							me.friend_list()
						}
					}
				})
			},
			
			to(){
				this.key = Math.ceil(Math.random()*1000000)*Math.ceil(Math.random()*1000000)
				uni.request({
					url:"https://curiousmore.com/qmore/push/upload/getToken",
					data:{
						key: this.key
					},
					method:"post",
					success:(res) => {
						this.token = res.data.data
					}
				})
			},
			
			addl(){
				let me = this
				uni.showActionSheet({
				  itemList: ['从手机相册选择', '拍照'],
				  success: function(res) {
					let aa = []
					if(res.tapIndex == 1){
						aa = ["camera"]
					}else{
						aa = ["album"]
					}
					me.to()
					uni.chooseImage({
						count: 1,
						sizeType: ['compressed'],
						sourceType: aa,
						success:(res_) => {
							let filePath = res_.tempFilePaths[0]
							if(me.token != ""){
								qiniu.upload(filePath, (res) => {
									me.img_list.push(res.fileUrl)
								}, (error) => {
									console.log('error: ' + error);
								}, {
									region: 'ECN',
									domain: 'http://img.curiousmore.com', 
									key: me.key, 
									uptoken: me.token, 
								}, (res) => {
									
								}, () => {
									// 取消上传
								}, () => {
									// `before` 上传前执行的操作
								}, (err) => {
									// `complete` 上传接受后执行的操作(无论成功还是失败都执行)
								});
							}
						}
					})
				  },
				fail: function(res) {
				    console.log(res.errMsg)
				  }
				})
			},
			
			goto_xuan() {
				uni.navigateTo({
					url: "/pages/My/AboutUs/AboutUs"
				})
			},
			
			fabu_quxiao() {
				this.isshow_fabu = false
				try{
					if(uni.getStorageSync('shuju_baobaoxiu')){
						uni.removeStorageSync('shuju_baobaoxiu')
					}
				}catch(e){}
			},
			
			guanbi_fabu() {
				this.isshow_fabu = false
			},
			
			fabu() {
				this.isshow_fabu = true
			},
			
			dianzan_(itme) {
				let me = this
				if(me.user_id != ""){
					uni.request({
						url: "https://curiousmore.com/qmore/message/history/insert",
						method: "post",
						header: {
							'content-type' : 'application/json'
						},
						data: {
							user_id: me.user_id,
							history_id: itme.id,
							history_type: "note",
							operation_type: "like"
						},
						success: (res) => {
							if(res.data.code == 0){
								this.friend_ = []
								this.friend_list()
							}
						},
						fail: (err) => {
							console.log(err)
						}
					})
				}else {
					this.login_shangchuan()
				}
			},
			
			onRefresh() {
				this.currentPage = 1
				this.triggered = true
				this.is_xiafang = false
				this.friend_ = []
				this.friend_list()
			},
			
			tijiao_pinglun_() {
				if(this.inp_content == ""){
					uni.showToast({
						title: "内容不能为空",
						icon: "none"
					})
				}else {
					this.tijiao_pinglun()
				}
			},
			
			tijiao_pinglun() {
				uni.request({
					url: "https://curiousmore.com/qmore/message/noteComment/insert",
					method: "post",
					header: {
						'content-type' : 'application/json'
					},
					data: {
						user_id: this.user_id,
						is_reply: false,
						reply_id: this.reply_id,
						parent_id: 0,
						note_id: this.note_id,
						content: this.inp_content
					},
					success: (res) => {
						if(res.data.code == 0){
							uni.showToast({
								title: "上传成功"
							})
							this.isshow = false
							this.friend_ = []
							this.friend_list()
						}
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			
			shandiao(){
				this.isshow = false
				this.isFocus = false
			},
			
			pinglun_(itme) {
				if(this.user_id != ""){
					this.isshow = true
					this.inp_content = ""
					setTimeout(() => {
						this.isFocus = true
					},200)
					this.reply_id = itme.user_id
					this.note_id = itme.id
				}else {
					this.login_shangchuan()
				}
			},
			
			login_shangchuan() {
				uni.showModal({
				    title: '请先登录',
				    success: function (res) {
				        if (res.confirm) {
							uni.navigateTo({
								url:"/pages/tabBer/login/logins"
							})
				        } else if (res.cancel) {
							uni.showToast({
								title: "登录取消",
								icon: "none"
							})
				        }
				    }
				})
			},
			
			gokantupian(photo_list,index) {
				uni.previewImage({
					urls: photo_list,
					current: index
				})
			},
			
			day_fun(day_time){
				let dangqian = new Date().getTime()
				let day_time_ = day_time.replace(/-/g, '/')
				let day = new Date(day_time_).getTime()
				let chazhi = dangqian - day
				let fanhui = ""
				if(chazhi > 30*24*60*60*1000){
					fanhui = "一个月前"
				}else if(chazhi > 7*24*60*60*1000){
					fanhui = "一周前"
				}else if(chazhi > 24*60*60*1000 && 7*24*60*60*1000 > chazhi){
					let tian = (chazhi / (24*60*60*1000)).toFixed(0)
					fanhui = tian + "天前"
				}else if(chazhi < 24*60*60*1000 && chazhi > 60*60*1000){
					let shi = (chazhi / (60*60*1000)).toFixed(0)
					fanhui = shi + "小时前"
				}else if(chazhi < 60*60*1000 ){
					let fen = (chazhi / (60*1000)).toFixed(0)
					if(fen == 0){
						fanhui = "1分钟前"
					}else{
						fanhui = fen + "分钟前"
					}
				}
				return fanhui
			},
			
			friend_list(){
				let me = this
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				uni.request({
					url: "https://curiousmore.com/qmore/message/noteUser/queryListPage",
					data: {
						status: 1,
						pageSize: 10,
						currentPage: me.currentPage,
						is_teach_paypal: true
					},
					success: (res) => {
						if(res.data.code == 0){
							if(res.data.data.length < 10){
								me.panduan_number = 2
							}else{
								me.panduan_number = 1
							}
							res.data.data.forEach((itme,index) => {
								itme.new_time = me.day_fun(itme.create_time)
								
								let a = []
								if(itme.picts.indexOf(",") > -1){
									a = itme.picts.split(",")
									itme.photo_arr = a
								}else{
									a.push(itme.picts)
									itme.photo_arr = a
								}
								if( a[0].indexOf("userid") != -1 ){
									itme.isvode = true
								}else {
									itme.isvode = false
								}
								let give = []
								if(itme.map.likeinfo.length != 0){
									itme.map.likeinfo.forEach((its) => {
										if(its.user_id == this.user_id){
											give.push(itme)
										}
									})
								}else {
									itme.zan = false
								}
								if(give.length == 0){
									itme.zan = false
								}else {
									itme.zan = true
								}
							})
						}
						let shuju_arr = []
						res.data.data.forEach((it) => {
							if(it.map.masterSetPriceEntity != null){
								shuju_arr.push(it)
							}
						})
						shuju_arr.forEach((shuju_arr_itme) => {
							shuju_arr_itme.title_biao = "【" + shuju_arr_itme.map.masterSetPriceEntity.course_num + "节"  + "】" + shuju_arr_itme.map.masterSetPriceEntity.title
							shuju_arr_itme.leng = shuju_arr_itme.title_biao.length * 22
						})
						if(me.friend_list_shuju.length == 0){
							me.friend_ = shuju_arr
						}else {
							me.friend_ = me.friend_.concat(shuju_arr)
						}
						me.friend_list_shuju = me.friend_
						me.triggered = false
						uni.hideLoading()
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			
			godenglu(){
				uni.navigateTo({
					url:"/pages/tabBer/login/logins"
				})
			},
		},
		
		onLoad() {
			try{
				if(uni.getStorageSync('userif_list').user_id){
					this.user_id = uni.getStorageSync('userif_list').user_id
				}else{
					this.panduan = 7
				}
				if(uni.getStorageSync('shuju_baobaoxiu')){
					let shu = uni.getStorageSync('shuju_baobaoxiu')
					this.chushi_content = "【" + shu.map.masterSetPriceEntity.course_num + "节" + "】" + shu.map.masterSetPriceEntity.title
					this.isshow_fabu = true
					this.id = shu.studycard_id
					this.categories = shu.map.masterSetPriceEntity.categories
				}
			}catch(e){}
			let me = this
			uni.getSystemInfo({
			    success: function (res) {
					let vh =  (res.windowHeight*1.812*0.7/1.812) / (res.windowHeight / 100)
					if(res.windowHeight > 810){
						me.windowHeight = (vh + 9) + "vh"
					}else {
						me.windowHeight = vh + "vh"
					}
			    }
			});
			this.friend_list()
		},
		onShow() {
			
		},
		onReachBottom() {
			if(this.list == 0){
				this.num++
			}
		}
	}
</script>
<style lang="scss" scoped>
	.scroll-Y {
		width: 750rpx;
		position: fixed;
		top: 345rpx;
	}
	.xiafang {
		width: 750rpx;
		text-align: center;
		height: 100rpx;
		line-height: 100rpx;
		color: #D6D6D6;
		font-size: 24rpx;
		border-top: 0.5rpx solid #D6D6D6;
		background: #FFFFFF;
	}
	.curriculum_content{
		width: 625rpx;
		height: 120rpx;
		border-radius: 15rpx;
		background: #F4F4F4;
		margin:15rpx 0 15rpx 25rpx;
		box-sizing: border-box;
		padding: 14rpx 16rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.curriculum_content_tit {
			display: flex;
			.curriculum_content_img {
				width: 92rpx;
				height: 92rpx;
				border-radius: 10rpx;
			}
		}
	}
	.pinglun_list {
		font-size: 25rpx;
	}
	
	.anniu {
		height: 60rpx;
		width: 80rpx;
		border-radius: 25rpx;
		color: #FFFFFF;
		font-size: 25rpx;
		line-height: 60rpx;
		text-align: center;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}
	.yige {
		width: 670rpx;
		height: 300rpx;
		border-radius: 12rpx;
	}
	.duoge{
		position: relative;
		left: 20rpx;
		width: 300rpx;
		height: 300rpx;
		border-radius: 12rpx;
		margin-right: 30rpx;
		margin-top: 30rpx;
	}
	.list_title {
		width: 332rpx;
		height: 105rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 26rpx;
		font-weight: bold;
		box-sizing: border-box;
		padding:0 50rpx;
		.img {
			width: 56rpx;
			height: 52rpx;
		}
	}
	
	.zhu_content{
		box-sizing: border-box;
		width: 750rpx;
		padding: 10rpx 40rpx;
		background: #FFFFFF;
		.up_title {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.biaoti {
			padding: 0 20rpx;
			height: 44rpx;
			background-color: #FFF1E8;
			border-radius: 22rpx;
			font-size: 22rpx;
			line-height: 44rpx;
			color: #FF7300;
			margin-bottom: 10rpx;
		}
		.tupian_list {
			display: flex;
			flex-wrap: wrap;
			margin-top: 20rpx;
		}
		.tupian_list_img {
			height: 214rpx;
			border-radius: 12rpx;
		}
		.xiamian_shuju {
			display: flex;
			justify-content: space-between;
			width: 550rpx;
			margin: 20rpx 0 0 50rpx ;
			.neibu {
				display: flex;
				align-items: center;
				font-size: 25rpx;
				color: #292929;
			}
		}
	}
	
	.suofang{
		animation:mymove  1s linear infinite;
		-webkit-animation:mymove 0.2s ease 1 infinite; /*Safari and Chrome*/
		background: #FF7300;
		color: #FFFFFF;
		min-width: 100rpx;
		height: 40rpx;
		padding: 5rpx 10rpx;
		text-align: center;
		line-height: 30rpx;
		border-radius: 22rpx;
		font-size: 20rpx;
		top: 15rpx;
		left: 500rpx;
		box-sizing: border-box;
		position: absolute;
		z-index: 121212;
	}
	
	@keyframes mymove{
		0%{
		transform: scale(1);  /*开始为原始大小*/
		}
		50%{
			transform: scale(1.1);
		}
		100%{
			transform: scale(1);
		}
	}
</style>
